<template>
  <div>
    <div class="page-breadcrumb-wrap">
      <el-card class="page-breadcrumb">
        <span class="breadcrumb-button" @click="goBack">审批设置</span>
        <span class="breadcrumb-line">/</span>
        <span class="breadcrumb-active">审批详情</span>
      </el-card>
    </div>
    <div class="data-form-wrap">
      <el-card :style="{ height: cardHeight + 'px', 'position': 'relative' }">
        <div class="flowBox">
          <span class="approvalProcess">审批详情 </span>
          <el-button type="primary" plain @click="goBack()">返 回</el-button>
        </div>
        <el-form
          ref="dataForm"
          class="dataForm"
          label-width="130px"
          :model="forms">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="项目：" prop="lineName">
                {{ forms.lineName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="分部：" prop="lotName">
                {{ forms.lotName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工区：" prop="workArea">
                {{ forms.workArea }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审批名称：" prop="projectName">
                {{ forms.projectName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="权属单位：" prop="ownershipUnit">
                {{ forms.ownershipUnit }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="权属单位审批人：" prop="linkName">
                {{ forms.linkName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系方式：" prop="linkPhone">
                {{ forms.linkPhone }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业主代表：" prop="ownerName">
                {{ forms.ownerName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工程实体名称：" prop="engineeringName">
                {{ forms.engineeringName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="建筑物名称：" prop="buildingName">
                {{ forms.buildingName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="建筑物类型：" prop="buildingType">
                {{ $dictTranslation(forms.buildingType+'', buildingTypeList) }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="穿越类型：" prop="throughType">
                {{ $dictTranslation(forms.throughType+'', throughTypeList) }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所在行政区：" prop="region">
                {{ forms.region }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="敏感区域类型：" prop="areaType">
                {{ $dictTranslation(forms.areaType+'', sensitiveAreaTypeList) }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div>
          <div class="flowBox">
            <span class="approvalProcess">
              <span style="margin-right:10px;">审批流程</span>
            </span>
          </div>
          <el-tabs v-model="activeName">
            <el-tab-pane label="设计方案流程" name="1"></el-tab-pane>
            <el-tab-pane label="施工方案流程" name="2"></el-tab-pane>
          </el-tabs>
          <el-form v-if="selectWorkFlowObj.id && activeName === '1'" label-width="130px">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="模型编码："> {{ selectWorkFlowObj.moduleCode }} </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="模型名称："> {{ selectWorkFlowObj.moduleName }} </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="生效版本："> {{ selectWorkFlowObj.version }} </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="流程描述："> {{ selectWorkFlowObj.remark }} </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-form v-if="constructionObj.id && activeName === '2'" label-width="130px">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="模型编码："> {{ constructionObj.moduleCode }} </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="模型名称："> {{ constructionObj.moduleName }} </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="生效版本："> {{ constructionObj.version }} </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="流程描述："> {{ constructionObj.remark }} </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import { getOrgLineLotAndWorkArea, getModuleById } from '@/api/approvalSetting'
export default {
  name: 'Detail',
  props: {
    rowData: {
      type: Object,
      require: true,
      default: () => {}
    },
    orgId: {
      type: [Number, String],
      require: true,
      default: () => 0
    },
    throughTypeList: {
      type: Array,
      require: true,
      default: () => []
    },
    sensitiveAreaTypeList: {
      type: Array,
      require: true,
      default: () => []
    },
    buildingTypeList: {
      type: Array,
      require: true,
      default: () => []
    }
  },
  data () {
    return {
      dialogTableVisible: false,
      orgTreeData: [],
      cardHeight: document.body.offsetHeight - 135,
      workFlowListData: [],
      forms: {
        lineName: '',
        lotName: '',
        workArea: ''
      },
      selectWorkFlowObj: {},
      isConstruction: false,
      constructionObj: {},
      activeName: '1'
    }
  },
  mounted () {
    // 监听窗口大小变化事件
    window.addEventListener('resize', this.setTableHeight)
    // 初始化表格高度
    this.setTableHeight()
    this.initData()
  },
  methods: {
    goBack () {
      this.$emit('isShowDetailChange')
    },
    setTableHeight () {
      this.$nextTick(() => {
        this.cardHeight = document.body.offsetHeight - 135
      })
    },
   async initData () {
    if (this.rowData) {
      this.forms = this.rowData

      if (this.rowData.moduleId) {
        const res = await getModuleById({ modelId: this.rowData.moduleId })
        this.selectWorkFlowObj.moduleCode = res.data.moduleCode
        this.selectWorkFlowObj.moduleName = res.data.moduleName
        this.selectWorkFlowObj.remark = res.data.remark
        this.selectWorkFlowObj.version = res.data.version
        this.selectWorkFlowObj.id = res.data.id
      }
      if (this.rowData.constructionModuleId) {
          const res = await getModuleById({ modelId: this.rowData.constructionModuleId })
          this.constructionObj.moduleCode = res.data.moduleCode
          this.constructionObj.moduleName = res.data.moduleName
          this.constructionObj.remark = res.data.remark
          this.constructionObj.version = res.data.version
          this.constructionObj.id = res.data.id
        }
      this.$forceUpdate()
    } else {
      const res = await getOrgLineLotAndWorkArea({ orgId: this.orgId })
      this.forms.lineName = res.data.lineName
      this.forms.lotName = res.data.lotName
      this.forms.workArea = res.data.workArea
      this.forms.workAreaId = this.orgId
    }
      console.log(this.forms, 'this.forms')
    }
  }
}
</script>
<style scoped lang="scss">
.tree-border {
  margin-top: 5px;
  border: 1px solid #e5e6e7;
  background: #fff none;
  border-radius: 4px;
  height: 300px;
  overflow-y: auto;
}
.data-form-wrap {
  padding-top: 0;
}
.approvalProcess {
  font-weight: 600;
}
.flowBox {
   margin-bottom: 10px;
  color: #101010;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
::v-deep .el-table__header-wrapper .el-checkbox {
  display: none;
}
::v-deep .el-tabs__nav-wrap::after {
  background-color: #fff;
}
</style>
